<template>
  <div class="game-play-container gradient-bg">
    <!-- 单词配对游戏 -->
    <MatchGame v-if="gameType === 'match'" @finish="handleFinish" />
    
    <!-- 单词雨游戏 -->
    <RainGame v-if="gameType === 'rain'" @finish="handleFinish" />
    
    <!-- 单词拼图游戏 -->
    <PuzzleGame v-if="gameType === 'puzzle'" @finish="handleFinish" />
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import MatchGame from '@/components/games/MatchGame.vue'
import RainGame from '@/components/games/RainGame.vue'
import PuzzleGame from '@/components/games/PuzzleGame.vue'
import { gameApi } from '@/api/game'

const route = useRoute()
const router = useRouter()
const gameType = route.params.type as string

const handleFinish = async (score: number, correctCount: number) => {
  try {
    await gameApi.recordGame({
      gameType,
      score,
      correctCount,
      duration: 0
    })
    ElMessage.success(`游戏结束！得分：${score}`)
    setTimeout(() => {
      router.push('/games')
    }, 2000)
  } catch (error) {
    console.error('记录游戏失败:', error)
    router.push('/games')
  }
}
</script>

<style scoped lang="scss">
.game-play-container {
  width: 100%;
  min-height: 100vh;
}
</style>
